<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>07-放大镜特效</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 350px;
            height: 400px;
            margin-left: 100px;
            margin-top: 100px;
            position: relative;
        }

        #small_box {
            border: 1px solid #000;
            overflow: hidden;
            position: relative;
        }

        #mask {
            width: 100px;
            height: 100px;
            background-color: rgba(255, 255, 0, 0.4);
            position: absolute;
            left: 0;
            top: 0;
            cursor: move;
            display: none;
        }

        #big_box {
            width: 600px;
            height: 600px;
            border: 1px solid #000;
            overflow: hidden;
            position: absolute;
            left: 360px;
            top: 0;
            display: none;
        }

        #big_box img {
            position: absolute;
        }

        #box ul {
            list-style: none;
            width: 100%;
            margin-top: 10px;
        }

        #box ul li {
            float: left;
            margin-right: 10px;
        }
    </style>
</head>

<body>
    <div id="box">
        <div id="small_box">
            <img src="images/pic001.jpg" alt="">
            <span id="mask"></span>
        </div>
        <div id="big_box">
            <img src="images/pic01.jpg" alt="">
        </div>
        <!--列表-->
        <ul id="list">
            <li><img src="images/pic0001.jpg" alt=""></li>
            <li><img src="images/pic0002.jpg" alt=""></li>
            <li><img src="images/pic0003.jpg" alt=""></li>
        </ul>
    </div>

    <script src="../jquery.min.3.4.1.js"></script>
    <script>
        $('#list li').mouseenter(function () {
            if ($(this).index() == 0) {
                $('#small_box').children().eq(0).prop('src', 'images/pic001.jpg')
            }
            if ($(this).index() == 1) {
                $('#small_box').children().eq(0).prop('src', 'images/pic002.jpg')
            }
            if ($(this).index() == 2) {
                $('#small_box').children().eq(0).prop('src', 'images/pic003.jpg')
            }
        })
        $('#small_box').on('mouseenter', function () {
            $(this).children().eq(0).siblings().show();
            $('#big_box').show();
            $('#small_box').on('mousemove', function (e) {
                var x = e.pageX - $(this).offset().left - $('#mask').width() / 2;
                var y = e.pageY - $(this).offset().top - $('#mask').width() / 2;
                $('#mask').css({ left: x, top: y });
                if (x <= 0) {
                    $('#mask').css({ left: 0 });
                }
                if (y <= 0) {
                    $('#mask').css({ top: 0 });
                }
                if (x >= $('#mask').parent().width()-$('#mask').width()){
                    $('#mask').css({ left: $('#mask').parent().width()-$('#mask').width() });
                }
                if (y >= $('#mask').parent().height()-$('#mask').height()){
                    $('#mask').css({ top: $('#mask').parent().height()-$('#mask').height() });
                }
                var bx = x / ($(this).width()-$('#mask').width()) * ($('#big_box').width()-$('#big_box').children().eq(0).width());
                var by = y / ($(this).height()-$('#mask').height()) * ($('#big_box').height()-$('#big_box').children().eq(0).height());
                $('#big_box').children().eq(0).css({ left: bx, top: by });
            })
        })
        $('#small_box').on('mouseleave', function () {
            $(this).children().eq(0).siblings().hide();
            $('#big_box').hide();
            $('#mask').off('mousemove');
        })
    </script>
</body>

</html>